<template>
  <h1>个人简历练习</h1>
  <table border="1px" align="center">
    <caption>个人简历</caption>
    <tr>
      <td>图片: &nbsp&nbsp</td>
      <td><img :src="person.imgUrl" width="300px"></td>
    </tr>
    <tr>
      <td>姓名: &nbsp&nbsp</td>
      <td>{{person.name}}</td>
    </tr>
    <tr>
      <td>年龄: &nbsp&nbsp</td>
      <td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友: &nbsp&nbsp</td>
      <td>
        <ul type="none">
          <li v-for="f in person.friends">{{f}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <br>
  <button @click="load">点击加载</button>
</template>

<script setup>
  import {ref} from "vue";

  const person = ref({imgUrl:'',name:'',age:'',friends:''});
  const load = ()=>{
    person.value= {
      imgUrl:'zhongchuhong.jpg',
      name:'钟楚红',
      age:'18',
      friends:['张国荣','周润发','张曼玉']
    };
  }
</script>

<style scoped>

</style>